<template>
	<div class="center">
		<div class="header">
			<img :src="user.cover" alt="">
			<img class="touxiang" :src="user.cover" alt="">
			<span class="name">{{user.nick_name}}</span>
		</div>
		<div class="liebiao">
			<router-link :to="{name:item.path}" v-for="(item,index) in lieArr" :key='index'>
				<img :src="item.img" alt="">
				<span>{{item.name}}</span>
				<img src="http://o6wndwjxn.qnssl.com/7c452201810231644027976.png" alt="">
			</router-link>
		</div>
		<div class="kong"></div>
		<bottomtab></bottomtab>
	</div>
</template>

<script>
import bottomtab from '@/components/public/tab'
import {
  mapState
} from 'vuex'
import {
  user_list
} from '@/api/center'
import {
  Cell,
  CellBox,
  CellFormPreview,
  Group,
  Badge
} from 'vux'
import axios from 'axios'

export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  components: {
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    bottomtab
  },
  data () {
    return {
      loading: true,
      user: {},
      lieArr: [{
        name: '关注老师',
        path: 'teacher_follow',
        img: 'https://o6wndwjxn.qnssl.com/Learning%20record.svg '
      }, {
        name: '购买记录',
        path: 'co_purchase',
        img: 'https://o6wndwjxn.qnssl.com/Purchase%20records.svg'
      }, {
        name: '优惠卷',
        path: 'co_Coupon',
        img: 'https://o6wndwjxn.qnssl.com/coupons.svg'
      }, {
        name: '我的钱包',
        path: 'co_wallet',
        img: 'https://o6wndwjxn.qnssl.com/My%20wallet.svg '
      }, {
        name: '我的收藏',
        path: 'co_Collection',
        img: 'https://o6wndwjxn.qnssl.com/collection.svg'
      }, {
        name: '意见反馈',
        path: 'co_Feedback',
        img: 'https://o6wndwjxn.qnssl.com/feedback.svg'
      }, {
        name: '评论列表',
        path: 'comment_list',
        img: 'https://o6wndwjxn.qnssl.com/feedback.svg'
      }]
    }
  },
  created () {
    this.jiazai()
  },
  methods: {
    jiazai () {
      let prams = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      user_list(prams).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        // console.log('个人中心', data)
        if (code === 200) {
          this.user = data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
    .liebiao {
        width: 100%;
        margin: 10px 0;
        background: #FFFFFF;
    }

    .liebiao>a {
        display: block;
        width: 90%;
        margin: 0 5%;
        border-bottom: #e6e6e6 1px solid;
        position: relative;
        height: 54px;
    }

    .liebiao>a:last-child {
        border: none;
    }

    .liebiao>a img:nth-child(1) {
        position: absolute;
        left: 3px;
        top: 15px;
        width: 25px;
        height: 25px;
    }

    .liebiao>a:nth-child(2) img:first-child,
    .liebiao>a:nth-child(3) img:first-child {
        width: 26px;
        height: 26px;
    }

    .liebiao>a:nth-child(4) img:first-child,
    .liebiao>a:nth-child(5) img:first-child,
    .liebiao>a:nth-child(6) img:first-child {
        width: 24px;
        height: 24px;
    }

    .liebiao>a span:nth-child(2) {
        display: block;
        text-indent: 40px;
        line-height: 54px;
        font-size: 14px;
        color: #333333;
    }

    .liebiao>a img:nth-child(3) {
        position: absolute;
        right: 0px;
        top: 19px;
        width: 16px;
        height: 16px;
        object-fit: cover;
    }

    .center {
        background: #FAFAFA !important;
        width: 100%;
        height: calc(100vh - 50px);
    }

    .kong {
        height: 50px;
    }

    .header {
        text-align: center;
        height: 190px;
        position: relative;
        overflow: hidden;
        background: #fafafa;
    }

    .header>img:first-child {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        filter: blur(5px);
    }

    .center {
        margin: 0;
        background: white;
    }

    .touxiang {
        display: block;
        margin: 27px auto 0;
        width: 102px;
        height: 102px;
        border-radius: 102px;
        object-fit: cover;
        position: relative;
        z-index: 1;
        border: 2px solid white;
    }

    .weui-cells {
        font-size: 14px;
    }

    .name {
        display: block;
        color: black;
        margin-top: 20px;
        font-size: 15px;
        position: relative;
        z-index: 2;
        color: white;
        text-shadow: 0 0 3px #333333;
    }
</style>
